<script setup>
import * as echarts from 'echarts';

const width = ref(300)
const height = ref(240)

const initChart = (xData = [], yData = []) => {
  width.value = myChart.value.offsetWidth - 1
  let chart = echarts.init(document.getElementById("myEcharts"));
  chart.setOption({
    title: {
      text: "社区案件量",
    },
    tooltip:{
      trigger: 'item'
    },
    color:"#409EFF",
    xAxis: {
      type: 'category',
      data: xData,
      axisLabel:{
        show: true
      },
      nameTextStyle :{
        fontSize : 6,
        width: 20,
        color: 'red'
      },
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '事件数量',
        data: yData,
        type: 'bar'
      }
    ]
  }
)
  ;
}

// onMounted(()=>{
//   initChart()
// })

const myChart = ref(null)

defineExpose({
  initChart
})
</script>

<template>
  <div class="echarts-box" ref="myChart">
    <div id="myEcharts" :style="{ minWidth: width+'px',width:'100%', height: height+'px' }"></div>
  </div>
</template>
<style>
.echarts-box {
  width: 100%;
}
</style>
